<template>
  <view v-if="show" class="u-tag-group" :style="[customStyle]">
    <template v-for="(text,index) in textList" :key="index">
      <u-tag
        :index="text.index || index"
        :disabled="text.disabled"
        :show="text.show"
        :text="text.value"
        :size="size"
        :type="type"
        :shape="shape"
        :color="color"
        :border-color="borderColor"
        :close-color="closeColor"
        :mode="mode"
        :closeable="closeable"
        :bg-color="bgColors[index % bgColors.length]"
        :customStyle="tagStyle"
        @click="clickTag"
        @close="closeTag"
      />
    </template>
  </view>
</template>

<script>
import mpConfig from '../../libs/mixin/mp-vertual-node.js'
/**
 * tagGroup 提示
 * @description 该组件一般用于标记和选择
 * @tutorial https://www.uviewui.com/components/tag.html
 * @property {String} type 主题类型（默认primary）
 * @property {String} size 标签大小（默认default）
 * @property {String} shape 标签形状（默认square）
 * @property {String} text 标签的文字内容
 * @property {String} bg-colors 自定义标签的背景颜色组
 * @property {String} border-color 标签的边框颜色
 * @property {String} close-color 关闭按钮的颜色
 * @property {String Number} index 点击标签时，会通过click事件返回该值
 * @property {String} mode 模式选择，见官网说明（默认light）
 * @property {Boolean} closeable 是否可关闭，设置为true，文字右边会出现一个关闭图标（默认false）
 * @property {Boolean} show 标签组显示与否（默认true）
 * @event {Function} click 点击标签触发
 * @event {Function} close closeable为true时，点击标签关闭按钮触发
 * @example <u-tag-group text="雪月夜" type="success" />
 */
export default {
  name: 'u-tag-group',
  options: mpConfig,
  emits: ["click", "close"],
  props: {
    // 标签类型info、primary、success、warning、error
    type: {
      type: String,
      default: 'primary'
    },
    // 标签的大小，分为default（默认），mini（较小）
    size: {
      type: String,
      default: 'default'
    },
    // tag的形状，circle（两边半圆形）, square（方形，带圆角），circleLeft（左边是半圆），circleRight（右边是半圆）
    shape: {
      type: String,
      default: 'square'
    },
    // 标签文字组 默认为空数组，无标签
    /**
     * {
     *    value: 文本值
     *    index: 唯一下标值
     *    show: 显示
     *    disabled：禁用
     * }
     */
    textList: {
      type: Array,
      default: []
    },
    // 背景颜色组，默认为空数组，即不处理
    bgColors: {
      type: Array,
      default: []
    },
    // 标签字体颜色，默认为空字符串，即不处理
    color: {
      type: String,
      default: ''
    },
    // 镂空形式标签的边框颜色
    borderColor: {
      type: String,
      default: ''
    },
    // 关闭按钮图标的颜色
    closeColor: {
      type: String,
      default: ''
    },
    // 点击时返回的索引值，用于区分例遍的数组哪个元素被点击了
    index: {
      type: [Number, String],
      default: ''
    },
    // 模式选择，dark|light|plain
    mode: {
      type: String,
      default: 'light'
    },
    // 是否可关闭
    closeable: {
      type: Boolean,
      default: false
    },
    // 是否显示
    show: {
      type: Boolean,
      default: true
    },
    // 自定义样式，对象形式
    customStyle: {
      type: Object,
      default() {
        return {};
      }
    },
    // 标签样式
    tagStyle: {
      type: Object,
      default() {
        return {
          margin: '5px 0',
          marginRight: '5px',
        };
      }
    }
  },
  methods: {
    // 标签被点击
    clickTag(index) {
      this.$emit('click', index);
    },
    // 点击标签关闭按钮
    closeTag(index) {
      this.$emit('close', index);
    }
  }
}
</script>
